<template>
    <div class="date-page">
        <!-- 标题和副标题 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 类型选择 -->
            <div class="type-row">
                <span>类型：</span>
                <el-button type="primary" @click="calculateDateInterval()">两日间隔计算</el-button>
            </div>

            <!-- 开始日期选择 -->
            <div class="input-row">
                <span>开始日期：</span>
                <el-date-picker
                        v-model="startDate"
                        type="date"
                        placeholder="选择日期"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :default-value="new Date()"
                />
            </div>

            <!-- 结束日期选择 -->
            <div class="input-row">
                <span>结束日期：</span>
                <el-date-picker
                        v-model="endDate"
                        type="date"
                        placeholder="结束日期"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :default-value="new Date()"
                />
            </div>

            <!-- 结果展示 -->
            <div class="result-section">
                <strong>结果：</strong> 相差 {{ result }} 天
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'

// 标题与副标题
const title = ref('')
const subtitle = ref('')

// 日期输入（默认值为今天和明天）
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(today.getDate() + 1)
const startDate = ref(today.toISOString().split('T')[0])
const endDate = ref(tomorrow.toISOString().split('T')[0])

//结果
const result = ref('')

// 加载标题与介绍
function loadToolInfo() {
    get(
        '/api/lifeTool/getInfo?path=Date',
        (data) => {
            if (data) {
                title.value = data.title || '日期计算'
                subtitle.value = data.introduction || ''
            }
        },
        (msg) => {
            ElMessage.error('获取工具信息失败：' + msg)
        }
    )
}

//日期差计算
function calculateDateInterval() {
    if (!startDate.value || !endDate.value) {
        ElMessage.warning('请选择开始和结束日期')
        return
    }
    post(
        '/api/lifeTool/getDateInterval',
        {
            start: startDate.value,
            end: endDate.value
        },
        (data) => {
            result.value = data.result ?? null
        },
        (message) => {
            ElMessage.error("计算失败" + message)
        }
    )
}

onMounted(() => {
    loadToolInfo()
    calculateDateInterval()
})
</script>

<style scoped>
.date-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.type-row,
.input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
}

.result-section {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}
</style>